<template>
  <el-tabs
    v-model="activeName"
    type="card"
    style="padding-right: 5px"
    @tab-click="handleClick"
  >
    <el-tab-pane label="Atelectasis" name="id1">
      <div id="plot">
        <div style="display: flex">
          <div
            id="achart11"
            style="width: 33%; height: 400px; padding-right: 4px"
          ></div>
          <div
            id="achart21"
            style="width: 33%; height: 400px; padding-right: 1px"
          ></div>
          <div
            id="achart31"
            style="width: 33%; height: 400px; padding-right: 1px"
          ></div>
        </div>
        <br />
        <div style="display: flex">
          <div
            id="achart1"
            style="width: 33%; height: 400px; padding-right: 4px"
          ></div>
          <div
            id="achart2"
            style="width: 33%; height: 400px; padding-right: 1px"
          ></div>
          <div
            id="achart3"
            style="width: 33%; height: 400px; padding-right: 1px"
          ></div>
        </div>
      </div>
      <!-- <div id="achart3" style="height: 600px; padding-top: 2%; padding-left: 2%"></div> -->
    </el-tab-pane>
    <el-tab-pane label="Data" name="id2">
      <iframe
        src="https://db.chcmu.com.cn/idbview/dataclinic/Atelectasis/"
        allowfullscreen="true"
        webkitallowfullscreen="true"
        mozallowfullscreen="true"
        oallowfullscreen="true"
        msallowfullscreen="true"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import * as echarts from 'echarts'
import AtelectasisData from '@/assets/data/Atelectasis.json'

export default {
  name: 'Chart',
  data() {
    return {
      activeName: 'id1',
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart11 = echarts.init(document.getElementById('achart11'))
      const chart21 = echarts.init(document.getElementById('achart21'))
      const chart31 = echarts.init(document.getElementById('achart31'))

      const chart1 = echarts.init(document.getElementById('achart1'))
      const chart2 = echarts.init(document.getElementById('achart2'))
      const chart3 = echarts.init(document.getElementById('achart3'))

      const option1 = {
        title: {
          text: 'Atelectasis',
          // subtext: "",
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br />{b}: {c} ({d}%)',
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, pixelRatio: 5 },
          },
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: ['Male', 'Female', 'Positive', 'Negative'],
        },
        series: [
          {
            name: 'Gender',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '40%'],
            label: {
              position: 'inner',
              fontSize: 15,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 4697, name: 'Male' },
              { value: 3830, name: 'Female' },
            ],
          },
          {
            name: 'Season',
            type: 'pie',
            radius: ['50%', '75%'],
            labelLine: {
              length: 30,
            },
            data: [
              { value: 2038, name: 'Spring' },
              { value: 2103, name: 'Summer' },
              { value: 2110, name: 'Autumn' },
              { value: 2276, name: 'Winter' },
            ],
          },
        ],
      }
      chart1.setOption(option1)

      const option2 = {
        // title: {
        //   text: "Mycoplasma Line with Mutation",
        //   left: "center",
        // },
        tooltip: {
          trigger: 'axis',
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, pixelRatio: 5 },
          },
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: [
            'All',
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
            '2018',
            '2019',
            '2020',
            '2021',
            '2022',
          ],
        },
        grid: {
          // top: "15%",
          // left: "1%",
          // right: "1%",
          bottom: '12%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sept',
            'Oct',
            'Nov',
            'Dec',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '2012',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 3, 30, 48, 53, 46],
          },
          {
            name: '2013',
            type: 'line',
            data: [69, 45, 63, 66, 58, 53, 37, 39, 38, 40, 33, 47],
          },
          {
            name: '2014',
            type: 'line',
            data: [57, 64, 65, 50, 51, 69, 83, 48, 38, 55, 62, 75],
          },
          {
            name: '2015',
            type: 'line',
            data: [64, 52, 59, 49, 67, 34, 49, 50, 48, 58, 68, 57],
          },
          {
            name: '2016',
            type: 'line',
            data: [59, 71, 79, 83, 93, 77, 73, 70, 55, 67, 76, 70],
          },
          {
            name: '2017',
            type: 'line',
            data: [99, 72, 92, 95, 104, 73, 108, 69, 63, 68, 70, 91],
          },
          {
            name: '2018',
            type: 'line',
            data: [112, 96, 97, 85, 81, 94, 91, 86, 79, 69, 81, 74],
          },
          {
            name: '2019',
            type: 'line',
            data: [110, 101, 93, 109, 110, 122, 160, 106, 98, 133, 132, 181],
          },
          {
            name: '2020',
            type: 'line',
            data: [149, 49, 62, 50, 63, 71, 54, 65, 91, 96, 99, 108],
          },
          {
            name: '2021',
            type: 'line',
            data: [81, 74, 64, 68, 82, 123, 112, 84, 76, 76, 110, 102],
          },
          {
            name: '2022',
            type: 'line',
            data: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: 'All',
            type: 'line',
            // stack: "Total",
            data: [801, 624, 674, 655, 709, 716, 767, 620, 616, 710, 784, 851],
          },
        ],
      }
      chart2.setOption(option2)

      const option3 = {
        title: {
          text: 'Children Age & Weight',
          // subtext: "",
          left: 'center',
        },
        tooltip: {
          // trigger: "item",
          formatter: '{c}',
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, pixelRatio: 5 },
          },
        },
        xAxis: [
          {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value} months',
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value} kg',
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            symbolSize: 5,
            data: AtelectasisData,
            type: 'scatter',
          },
        ],
      }
      chart3.setOption(option3)

      const option11 = {
        title: {
          text: 'Mycoplasma Genetic Resistance Mutation',
          // subtext: "",
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br />{b}: {c} ({d}%)',
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, pixelRatio: 5 },
          },
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: ['Male', 'Female', 'Positive', 'Negative'],
        },
        series: [
          {
            name: 'Gender',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '40%'],
            label: {
              position: 'inner',
              fontSize: 15,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 176, name: 'Male' },
              { value: 172, name: 'Female' },
            ],
          },
          {
            name: 'Mutation',
            type: 'pie',
            radius: ['50%', '75%'],
            labelLine: {
              length: 30,
            },
            data: [
              { value: 233, name: 'Positive' },
              { value: 115, name: 'Negative' },
            ],
          },
        ],
      }
      chart11.setOption(option11)

      const option21 = {
        // title: {
        //   text: "Mycoplasma Line with Mutation",
        //   left: "center",
        // },
        tooltip: {
          trigger: 'axis',
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, pixelRatio: 5 },
          },
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: ['All', 'Positive', 'Negative'],
        },
        grid: {
          // top: "15%",
          // left: "1%",
          // right: "1%",
          bottom: '8%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sept',
            'Oct',
            'Nov',
            'Dec',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'Positive',
            type: 'line',
            // stack: "Total",
            data: [25, 41, 11, 11, 4, 7, 34, 50, 18, 14, 8, 10],
          },
          {
            name: 'Negative',
            type: 'line',
            // stack: "Total",
            data: [4, 7, 9, 11, 6, 8, 10, 8, 16, 18, 10, 8],
          },
          {
            name: 'All',
            type: 'line',
            // stack: "Total",
            data: [29, 48, 20, 22, 10, 15, 44, 58, 34, 32, 18, 18],
          },
        ],
      }
      chart21.setOption(option21)

      const option31 = {
        title: {
          text: 'Children Age & Weight',
          // subtext: "",
          left: 'center',
        },
        tooltip: {
          // trigger: "item",
          formatter: '{c}',
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true, pixelRatio: 5 },
          },
        },
        xAxis: [
          {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value} months',
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value} kg',
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            symbolSize: 10,
            data: [
              [62.2, 21],
              [78.4, 23],
              [42.3, 15],
              [17.3, 9],
              [45.3, 15],
              [79.7, 22],
              [36.8, 16],
              [46.3, 15],
              [90.5, 23],
              [66.2, 16.5],
              [48.1, 15],
              [36.6, 13],
              [108.1, 22],
              [14.6, 9],
              [28.8, 12],
              [88, 19],
              [42.6, 16.5],
              [68.2, 19],
              [106.3, 25],
              [77.2, 26],
              [44.4, 16],
              [36.8, 15],
              [88.4, 25],
              [70, 20],
              [30.3, 14],
              [146.9, 30],
              [7, 8.5],
              [43.2, 15],
              [59.5, 15],
              [116.2, 36],
              [7.7, 7],
              [80.5, 23],
              [7.8, 8.5],
              [130.4, 34],
              [44.2, 13],
              [88.5, 39],
              [20.8, 9],
              [33.3, 13.5],
              [156.7, 50],
              [29.7, 12.5],
              [62.7, 18],
              [36.4, 13],
              [38.8, 12],
              [57.5, 15],
              [80.7, 19],
              [44.5, 15],
              [8.7, 8.75],
              [34.9, 12],
              [34.2, 11],
              [71.7, 17],
              [23.2, 11.5],
              [36.9, 14],
              [77.5, 20],
              [103.7, 20],
              [20.3, 12.5],
              [45.7, 15],
              [60.5, 15],
              [75.9, 21],
              [79.7, 22],
              [82.9, 26],
              [98.1, 24.5],
              [74.4, 19],
              [128.4, 36],
              [94.9, 36],
              [11.7, 11],
              [73, 21],
              [43.7, 13.5],
              [38, 14.5],
              [16.8, 9.5],
              [39.9, 13],
              [58.1, 17],
              [10.2, 8],
              [89.4, 21],
              [39.1, 13.5],
              [42.9, 15],
              [164.9, 30],
              [50.9, 17],
              [88.8, 30],
              [58.7, 16],
              [91.9, 26],
              [65, 18.5],
              [19.6, 12],
              [30.9, 14],
              [96.8, 20.5],
              [45.1, 15],
              [109.9, 22.5],
              [141.6, 25],
              [10.7, 11],
              [18.3, 8.5],
              [18.6, 11],
              [20.6, 11],
              [87.8, 22],
              [53.3, 14],
              [24.9, 10],
              [65.1, 17],
              [36.5, 14],
              [23.7, 10.5],
              [75.4, 21],
              [58.2, 17.5],
              [31.3, 11],
              [119.1, 33],
              [75, 19],
              [107.5, 43],
              [26.2, 10.5],
              [128.2, 39],
              [60.3, 18],
              [153.2, 37],
              [95.3, 20],
              [59.1, 19],
              [85.2, 24.5],
              [36.5, 15],
              [87.3, 22],
              [81.8, 20],
              [32.1, 18.5],
              [40.1, 15],
              [38.3, 16.5],
              [55.2, 18],
              [56.8, 17],
              [47.6, 13.5],
              [76.7, 23],
              [38.7, 14],
              [38.7, 13],
              [82.2, 20],
              [17.7, 10.5],
              [24.4, 11.5],
              [19.3, 11],
              [19.8, 11],
              [34.3, 17],
              [40.3, 13],
              [23, 12],
              [53.8, 14.5],
              [57.6, 17.5],
              [43.7, 16],
              [19.3, 8],
              [95.8, 21],
              [98.9, 40],
              [27.5, 12],
              [14.6, 9],
              [35, 11.5],
              [76.4, 23],
              [111.2, 25],
              [36, 11],
              [26.1, 11],
              [25.8, 11],
              [13.5, 9.2],
              [66.8, 20],
              [38.1, 12],
              [51.1, 17],
              [33.8, 13],
              [57.2, 17.5],
              [29.8, 11],
              [108.8, 24],
              [36.6, 12],
              [58, 13.5],
              [103.6, 36],
              [49.9, 18],
              [81.6, 21],
              [7.5, 8.5],
              [33.9, 14.5],
              [85.1, 26],
              [25.2, 11],
              [39.6, 13.5],
              [52.9, 14],
              [100.8, 23],
              [32, 16.3],
              [119.3, 40],
              [42.5, 15],
              [33.7, 14],
              [82.2, 24.5],
              [9.9, 11],
              [41.1, 14],
              [31.7, 10.5],
              [107.2, 27],
              [49.1, 16],
              [32.5, 14],
              [92.9, 28],
              [33.8, 10.5],
              [52.4, 19.5],
              [74.4, 19],
              [37.4, 13],
              [35.3, 14],
              [59.2, 17],
              [28.4, 11],
              [43.3, 16],
              [38.3, 12],
              [31.5, 13],
              [108, 29],
              [72.1, 20],
              [86.8, 20.5],
              [116.5, 32],
              [64.2, 22],
              [160, 59],
              [63.7, 22],
              [112.6, 35],
              [37.6, 11],
              [38, 15],
              [71, 20],
              [125.5, 37],
              [125, 38.5],
              // [26.7, NA],
              [93.7, 21.5],
              [78.4, 20],
              [38.7, 16],
              [92.3, 18.5],
              [65.1, 19],
              [56.8, 18],
              [116, 32],
              [119.3, 26],
              [96.8, 28],
              [66.9, 17.5],
              [59, 23],
              [50.1, 15.5],
              [82.1, 20],
              [70.2, 23],
              [51.3, 13.5],
              [82.8, 20],
              [43.3, 12],
              [97.6, 24],
              [44.7, 19],
              [130.3, 27.5],
              [20.9, 10],
              [26.3, 12],
              [29.6, 13],
              [48.4, 13],
              [73.1, 20],
              [134.9, 35],
              [97.9, 19],
              [51.1, 15],
              [22.2, 10],
              [27.5, 14.5],
              [77.1, 23],
              [110.8, 21],
              [36, 17.5],
              [115.3, 29],
              [29.9, 11.5],
              [29.7, 13],
              [117, 26],
              [77.2, 21],
              [14.2, 10],
              [59.6, 17],
              [61, 17.8],
              [59.9, 18],
              [57.5, 17],
              [146.8, 60],
              [137.2, 44],
              [87.8, 24.5],
              [40.6, 16],
              [75.5, 19],
              [118.4, 28],
              [72.1, 20],
              [13.3, 10],
              [114.5, 23],
              [56.6, 15.5],
              [100.2, 23],
              [101.1, 22],
              [29.3, 13],
              [40.3, 12],
              [52.7, 17],
              [53.1, 16],
              [74.1, 19],
              [68.6, 21],
              [49.2, 15],
              [63, 17],
              [89.6, 25],
              [40.5, 12],
              [12.6, 9.5],
              [135.4, 31],
              [88, 18],
              [16.3, 9.5],
              [20.5, 10],
              [37.5, 10.5],
              [72.2, 20],
              [16.5, 11],
              [66.9, 22],
              [44.3, 14],
              [134.6, 40],
              [25.8, 12.5],
              [25.8, 13],
              [25.9, 13],
              [61.7, 19],
              [84.7, 22.5],
              [83.7, 25.5],
              [22, 11.5],
              [117.7, 31.5],
              [7.4, 8],
              [148, 36],
              [45.7, 13],
              [53.7, 15],
              [64.8, 18],
              [81.9, 20],
              [107.2, 25],
              [50.1, 16],
              [85.9, 37],
              [86.4, 24],
              [39.2, 15],
              [64.2, 24],
              [17.3, 11.6],
              [90.4, 25],
              [42.3, 19],
              [38.6, 14],
              [10.1, 10],
              [35.6, 14],
              [111.5, 32],
              [89.7, 31],
              [60.5, 18],
              [7.2, 8.1],
              [97.4, 24],
              [78, 19.5],
              [50.5, 16],
              [23.3, 9],
              [39.1, 16],
              [80.8, 20],
              [26.2, 12],
              [34.9, 16],
              [40, 16],
              [144.4, 36],
              [63.8, 18],
              [61.8, 16],
              [75.3, 26],
              [26.2, 14],
              [127.6, 30],
              [44.8, 18.5],
              [89.5, 24],
              [72.5, 19],
              [129.1, 40],
              [48.8, 18],
              [13.9, 10.5],
              [140.4, 40],
              [64.5, 17],
              [111.7, 41.5],
              [45.6, 15.5],
              [58.5, 15],
              [22.4, 10],
              [40.4, 13],
              [65.1, 22],
              [81.1, 21],
              [21.2, 10.5],
              [37.9, 14],
              [88.9, 24],
              [27.1, 12],
              [98.4, 32.5],
              [75.6, 18],
              [98.3, 20],
              [100.2, 22],
              [33.2, 12.5],
              [9.2, 5.2],
              [76.8, 24],
              [46.3, 16],
            ],
            type: 'scatter',
          },
        ],
      }
      chart31.setOption(option31)
    },
  },
}
</script>
